import { type SVGAttributes } from "react"
import { css } from "styled-system/css"

type Props = SVGAttributes<SVGSVGElement>

export function Illustration(props: Props) {
  return (
    <svg
      width="731"
      height="481"
      viewBox="0 0 731 481"
      fill="none"
      className={css({
        color: { _light: "#D1E1DA", _dark: "#283E35" },
        position: "absolute",
        bottom: 0,
        right: 0,
        width: "min(50%,48vw)",
        height: "auto",
        maxW: "100%",
        hideBelow: "md",
      })}
      {...props}
    >
      <path
        d="M0 392.857C0 375.815 13.815 362 30.8566 362H149.015C166.056 362 179.871 375.815 179.871 392.857V392.857C179.871 409.898 166.056 423.713 149.015 423.713H30.8566C13.815 423.713 0 409.898 0 392.857V392.857Z"
        fill="#C6F895"
      />
      <path
        d="M69.3827 399.187C67.3055 399.187 66.1089 397.674 66.1089 395.258V395.077C66.1089 392.639 67.3507 391.171 69.3827 391.171C71.4147 391.171 72.6339 392.662 72.6339 395.1V395.258C72.6339 397.674 71.4147 399.187 69.3827 399.187ZM69.3601 401.309C72.8371 401.309 75.4336 398.916 75.4336 395.235V395.055C75.4336 391.442 72.8371 389.026 69.3827 389.026C65.9057 389.026 63.3092 391.465 63.3092 395.123V395.303C63.3092 398.893 65.8831 401.309 69.3601 401.309Z"
        fill="black"
      />
      <path
        d="M77.902 405.125H80.6339V399.232C81.2661 400.383 82.6208 401.309 84.4947 401.309C87.5428 401.309 89.7328 399.006 89.7328 395.213V395.032C89.7328 391.217 87.4525 389.026 84.4947 389.026C82.7562 389.026 81.2887 390.042 80.6339 391.171V389.275H77.902V405.125ZM83.8174 399.141C81.8305 399.141 80.5436 397.9 80.5436 395.258V395.077C80.5436 392.458 81.8983 391.171 83.7948 391.171C85.5785 391.171 86.9332 392.458 86.9332 395.077V395.258C86.9332 397.787 85.8269 399.141 83.8174 399.141Z"
        fill="black"
      />
      <path
        d="M97.3825 401.309C100.408 401.309 102.417 399.954 102.801 397.471H100.16C99.9564 398.622 99.0985 399.277 97.4503 399.277C95.4183 399.277 94.2894 398.013 94.199 395.777H102.846V394.987C102.846 390.765 100.205 389.026 97.2696 389.026C93.9055 389.026 91.3994 391.465 91.3994 395.123V395.303C91.3994 399.029 93.9055 401.309 97.3825 401.309ZM94.2442 393.948C94.5151 392.12 95.6215 391.013 97.2696 391.013C98.963 391.013 100.002 391.916 100.137 393.948H94.2442Z"
        fill="black"
      />
      <path
        d="M105.287 401.083H108.019V394.129C108.019 392.255 109.26 391.307 110.796 391.307C112.421 391.307 113.144 392.12 113.144 393.903V401.083H115.876V393.655C115.876 390.404 114.205 389.026 111.834 389.026C109.892 389.026 108.583 389.997 108.019 391.149V389.275H105.287V401.083Z"
        fill="black"
      />
      <path
        d="M371 449.857C371 432.815 384.815 419 401.857 419H520.015C537.056 419 550.871 432.815 550.871 449.857V449.857C550.871 466.898 537.056 480.713 520.015 480.713H401.857C384.815 480.713 371 466.898 371 449.857V449.857Z"
        fill="#85F2AA"
      />
      <path
        d="M423.306 455.434C421.229 455.434 420.032 453.921 420.032 451.505V451.325C420.032 448.886 421.274 447.419 423.306 447.419C425.338 447.419 426.557 448.909 426.557 451.347V451.505C426.557 453.921 425.338 455.434 423.306 455.434ZM423.283 457.556C426.76 457.556 429.357 455.163 429.357 451.483V451.302C429.357 447.69 426.76 445.274 423.306 445.274C419.829 445.274 417.232 447.712 417.232 451.37V451.551C417.232 455.141 419.806 457.556 423.283 457.556Z"
        fill="black"
      />
      <path
        d="M431.825 461.372H434.557V455.479C435.189 456.631 436.544 457.556 438.418 457.556C441.466 457.556 443.656 455.253 443.656 451.46V451.28C443.656 447.464 441.376 445.274 438.418 445.274C436.679 445.274 435.212 446.29 434.557 447.419V445.522H431.825V461.372ZM437.741 455.389C435.754 455.389 434.467 454.147 434.467 451.505V451.325C434.467 448.706 435.822 447.419 437.718 447.419C439.502 447.419 440.856 448.706 440.856 451.325V451.505C440.856 454.034 439.75 455.389 437.741 455.389Z"
        fill="black"
      />
      <path
        d="M451.306 457.556C454.331 457.556 456.341 456.202 456.724 453.718H454.083C453.88 454.87 453.022 455.524 451.373 455.524C449.341 455.524 448.213 454.26 448.122 452.025H456.77V451.235C456.77 447.012 454.128 445.274 451.193 445.274C447.829 445.274 445.323 447.712 445.323 451.37V451.551C445.323 455.276 447.829 457.556 451.306 457.556ZM448.167 450.196C448.438 448.367 449.545 447.261 451.193 447.261C452.886 447.261 453.925 448.164 454.06 450.196H448.167Z"
        fill="black"
      />
      <path
        d="M459.21 457.331H461.942V450.377C461.942 448.503 463.184 447.554 464.719 447.554C466.344 447.554 467.067 448.367 467.067 450.151V457.331H469.799V449.902C469.799 446.651 468.128 445.274 465.757 445.274C463.816 445.274 462.506 446.245 461.942 447.396V445.522H459.21V457.331Z"
        fill="black"
      />
      <path
        d="M473.014 457.331H475.746V445.522H473.014V457.331ZM474.346 443.581C475.249 443.581 475.972 442.903 475.972 442.023C475.972 441.12 475.249 440.442 474.346 440.442C473.443 440.442 472.72 441.12 472.72 442.023C472.72 442.903 473.443 443.581 474.346 443.581Z"
        fill="black"
      />
      <path
        d="M479.076 457.331H481.808V450.377C481.808 448.503 483.049 447.554 484.585 447.554C486.21 447.554 486.933 448.367 486.933 450.151V457.331H489.665V449.902C489.665 446.651 487.994 445.274 485.623 445.274C483.682 445.274 482.372 446.245 481.808 447.396V445.522H479.076V457.331Z"
        fill="black"
      />
      <path
        d="M497.847 461.666C501.505 461.666 503.83 459.927 503.853 456.45V445.522H501.121V447.329C500.444 446.154 499.269 445.274 497.328 445.274C494.28 445.274 492.022 447.758 492.022 451.076V451.235C492.022 454.644 494.302 456.856 497.26 456.856C498.999 456.856 500.466 455.795 501.121 454.666V456.405C501.121 458.527 499.947 459.588 497.824 459.588C496.041 459.588 495.138 458.911 494.912 457.737H492.157C492.474 459.995 494.144 461.666 497.847 461.666ZM497.937 454.757C496.176 454.757 494.822 453.402 494.822 451.212V451.031C494.822 448.886 495.996 447.419 498.028 447.419C499.992 447.419 501.211 448.751 501.211 450.986V451.144C501.211 453.402 499.834 454.757 497.937 454.757Z"
        fill="black"
      />
      <path
        d="M539 140.857C539 123.815 552.815 110 569.857 110H650.385C667.426 110 681.241 123.815 681.241 140.857V140.857C681.241 157.898 667.426 171.713 650.385 171.713H569.857C552.815 171.713 539 157.898 539 140.857V140.857Z"
        fill="black"
      />
      <path
        d="M578.176 148.556C581.382 148.556 583.437 146.637 583.64 143.928H581.134C580.976 145.599 579.734 146.457 578.289 146.457C576.279 146.457 575.015 145.102 575.015 142.528V142.347C575.015 139.909 576.347 138.464 578.221 138.464C579.666 138.464 580.705 139.119 580.93 140.699H583.572C583.256 137.448 580.795 136.274 578.176 136.274C574.88 136.274 572.215 138.645 572.215 142.393V142.573C572.215 146.344 574.789 148.556 578.176 148.556Z"
        fill="white"
      />
      <path d="M586.06 148.331H588.792V131.058H586.06V148.331Z" fill="white" />
      <path
        d="M597.405 146.434C595.328 146.434 594.131 144.921 594.131 142.506V142.325C594.131 139.886 595.373 138.419 597.405 138.419C599.437 138.419 600.656 139.909 600.656 142.347V142.506C600.656 144.921 599.437 146.434 597.405 146.434ZM597.383 148.556C600.86 148.556 603.456 146.163 603.456 142.483V142.302C603.456 138.69 600.86 136.274 597.405 136.274C593.928 136.274 591.332 138.712 591.332 142.37V142.551C591.332 146.141 593.906 148.556 597.383 148.556Z"
        fill="white"
      />
      <path
        d="M609.966 148.556C612.991 148.556 614.685 147.179 614.685 144.786C614.685 142.28 613.036 141.602 610.259 141.173C608.385 140.857 607.821 140.519 607.821 139.661C607.821 138.825 608.521 138.261 609.695 138.261C610.959 138.261 611.569 138.758 611.795 139.841H614.323C614.03 137.177 612.111 136.274 609.695 136.274C607.482 136.274 605.27 137.448 605.27 139.819C605.27 142.031 606.421 142.912 609.537 143.409C611.275 143.702 612.066 144.063 612.066 145.034C612.066 146.028 611.411 146.547 609.943 146.547C608.34 146.547 607.731 145.847 607.595 144.65H605.021C605.134 147.157 606.918 148.556 609.966 148.556Z"
        fill="white"
      />
      <path
        d="M622.274 148.556C625.299 148.556 627.309 147.202 627.693 144.718H625.051C624.848 145.87 623.99 146.524 622.342 146.524C620.31 146.524 619.181 145.26 619.091 143.025H627.738V142.235C627.738 138.012 625.096 136.274 622.161 136.274C618.797 136.274 616.291 138.712 616.291 142.37V142.551C616.291 146.276 618.797 148.556 622.274 148.556ZM619.136 141.196C619.407 139.367 620.513 138.261 622.161 138.261C623.855 138.261 624.893 139.164 625.029 141.196H619.136Z"
        fill="white"
      />
      <path
        d="M634.603 148.556C636.342 148.556 637.855 147.518 638.487 146.344V148.331H641.219V131.058H638.487V138.329C637.832 137.155 636.635 136.274 634.716 136.274C631.646 136.274 629.41 138.667 629.41 142.438V142.618C629.41 146.457 631.646 148.556 634.603 148.556ZM635.281 146.389C633.52 146.389 632.21 145.147 632.21 142.551V142.37C632.21 139.819 633.384 138.419 635.394 138.419C637.38 138.419 638.577 139.706 638.577 142.302V142.483C638.577 145.125 637.177 146.389 635.281 146.389Z"
        fill="white"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M664.001 29.8117C664.001 29.8117 664.002 29.8117 663.949 32.3111C663.896 34.8106 663.896 34.8106 663.896 34.8106L663.192 34.7965C662.729 34.7875 662.046 34.7746 661.164 34.7592C659.401 34.7283 656.847 34.687 653.682 34.6457C647.353 34.5631 638.587 34.4803 628.84 34.4793C618.652 34.4783 610.527 42.8531 610.845 53.0333C611.226 65.27 611.732 77.938 612.143 87.5492C612.313 91.529 612.467 94.9839 612.589 97.6659L623.647 85.4883C624.576 84.4662 626.157 84.39 627.179 85.3183C628.201 86.2465 628.277 87.8276 627.349 88.8497L612.222 105.506C611.294 106.528 609.713 106.605 608.691 105.676L592.034 90.5498C591.012 89.6216 590.936 88.0405 591.864 87.0184C592.793 85.9962 594.374 85.9201 595.396 86.8484L607.595 97.9271C607.473 95.2364 607.319 91.7646 607.148 87.7627C606.736 78.1418 606.229 65.4526 605.847 53.1891C605.442 40.1846 615.833 29.478 628.841 29.4793C638.615 29.4803 647.403 29.5633 653.747 29.6462C656.92 29.6876 659.482 29.7289 661.252 29.7599C662.137 29.7754 662.823 29.7884 663.289 29.7974L664.001 29.8117Z"
        fill="currentColor"
      />
      <path
        d="M677.365 39.0136C673.546 41.8885 668.12 41.1234 665.245 37.3046C662.37 33.4859 663.135 28.0596 666.954 25.1846C670.772 22.3097 676.199 23.0748 679.074 26.8936C681.949 30.7123 681.183 36.1386 677.365 39.0136Z"
        fill="currentColor"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M276.849 394.5H180V389.5H276.849C288.268 389.5 298.035 397.709 299.999 408.958L304.927 437.182C306.473 446.038 314.161 452.5 323.151 452.5H361.464L349.822 440.858C348.846 439.882 348.846 438.299 349.822 437.322C350.799 436.346 352.382 436.346 353.358 437.322L369.268 453.232C370.244 454.209 370.244 455.791 369.268 456.768L353.358 472.678C352.382 473.654 350.799 473.654 349.822 472.678C348.846 471.701 348.846 470.118 349.822 469.142L361.464 457.5H323.151C311.732 457.5 301.965 449.291 300.001 438.042L295.073 409.818C293.527 400.962 285.839 394.5 276.849 394.5Z"
        fill="currentColor"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M605.732 174.232C606.709 173.256 608.291 173.256 609.268 174.232L625.178 190.142C626.154 191.118 626.154 192.701 625.178 193.678C624.201 194.654 622.618 194.654 621.642 193.678L610 182.036V432C610 444.979 599.479 455.5 586.5 455.5H551.5V450.5H586.5C596.717 450.5 605 442.217 605 432V182.036L593.358 193.678C592.382 194.654 590.799 194.654 589.822 193.678C588.846 192.701 588.846 191.118 589.822 190.142L605.732 174.232Z"
        fill="currentColor"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M353 163.5C353 150.521 363.521 140 376.5 140H538V145H376.5C366.283 145 358 153.283 358 163.5V278.5C358 291.479 347.479 302 334.5 302H97C86.7827 302 78.5 310.283 78.5 320.5V351.464L90.1421 339.822C91.1184 338.846 92.7013 338.846 93.6777 339.822C94.654 340.799 94.654 342.382 93.6777 343.358L77.7678 359.268C76.7914 360.244 75.2085 360.244 74.2322 359.268L58.3223 343.358C57.346 342.382 57.346 340.799 58.3223 339.822C59.2986 338.846 60.8815 338.846 61.8579 339.822L73.5 351.464V320.5C73.5 307.521 84.0213 297 97 297H334.5C344.717 297 353 288.717 353 278.5V163.5Z"
        fill="currentColor"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M247 272H152V267H247V272Z"
        fill="currentColor"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M294 367H199V362H294V367Z"
        fill="currentColor"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M731 292H636V287H731V292Z"
        fill="currentColor"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M517.5 145H453V140H517.5V145Z"
        fill="#41B883"
      />
    </svg>
  )
}
